<script setup>
import { defineEmits, defineProps, reactive, ref, watch } from 'vue';

import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  searchlist: {
    type: Array,
    default: () => {
      return [
        {
          label: '名称',
          name: 'name',
          value: '',
          type: 'input',
          placeholder: '请输入名称',
        },
        {
          label: '类型',
          name: 'type',
          value: '',
          type: 'select',
          placeholder: '请选择类型',
          options: [
            {
              label: '类型一',
              value: 1,
            },
            {
              label: '类型二',
              value: 2,
            },
          ],
        },
        {
          label: '省市',
          name: 'city',
          value: [],
          type: 'cascader',
          placeholder: '请选择省市',
          options: [],
        },
      ];
    },
  },
});

const emits = defineEmits(['query', 'reset']);
const expand = ref(false);
const formRef = ref();
const formState = reactive({});
const forms = reactive({});
//

watch(
  () => props.searchlist,
  (newV, oldV) => {
    newV.forEach((item, index) => {
      forms[item.name] = item.value;
    });
  },
  {
    immediate: true,
  },
);
const querybtn = () => {
  console.log('输出form', forms);

  emits('query', forms);
};
const resetbtn = (e) => {
  formRef.value.resetFields();

  props.searchlist.forEach((item) => {
    forms[item.name] = '';
  });

  emits('reset', forms);
};
</script>
<template>
  <div class="">
    <a-form ref="formRef" name="advanced_search" :model="formState">
      <a-row :gutter="24">
        <template v-for="(i, index) in props.searchlist" :key="i.name">
          <a-col v-show="expand || index < 3" :span="8">
            <a-form-item
              :name="forms[i.name]"
              :label="i.label"
              v-if="i.type == 'input'"
            >
              <a-input
                v-model:value="forms[i.name]"
                :placeholder="i.placeholder"
                allow-clear
              />
            </a-form-item>
            <a-form-item
              :name="forms[i.name]"
              :label="i.label"
              v-if="i.type == 'select'"
            >
              <a-select
                ref="select"
                v-model:value="forms[i.name]"
                allow-clear
                :placeholder="i.placeholder"
              >
                <a-select-option
                  v-for="(item, index) in i.options"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              :name="forms[i.name]"
              :label="i.label"
              v-if="i.type == 'cascader'"
            >
              <a-cascader
                v-model:value="forms[i.name]"
                :options="i.options"
                :placeholder="i.placeholder"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </template>
        <a-col
          :span="8"
          style="text-align: left"
          v-show="props.searchlist.length < 3"
        >
          <a-button type="primary" html-type="submit" @click="querybtn">
            搜索
          </a-button>
          <a-button style="margin: 0 8px" @click="resetbtn">重置</a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col
          :span="24"
          style="text-align: left"
          v-show="props.searchlist.length >= 3"
        >
          <a-button type="primary" html-type="submit" @click="querybtn">
            搜索
          </a-button>
          <a-button style="margin: 0 8px" @click="resetbtn">重置</a-button>
          <a
            style="font-size: 12px"
            @click="expand = !expand"
            v-show="props.searchlist.length > 3"
          >
            <template v-if="expand">
              <UpOutlined />
            </template>
            <template v-else>
              <DownOutlined />
            </template>
            {{ expand ? '收起' : '展开' }}
          </a>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<style lang="less" scoped></style>
